import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';
import 'antd/dist/antd.css';
import MenuLeft from '../menuleft/menuleft';
import AppRouter from '../app-router/app-router';
import HeaderRight from '../header-right/header-right';
import $ from 'jquery';
import cookie from 'react-cookies';
import store from '../redux/store';
import {go2login} from '../redux/action';
const { Header, Footer, Sider, Content } = Layout;
class App extends Component {
    constructor(props) {
        super(props);
        // console.log(cookie)
    }

    state = {
        collapsed: false,
    };

    path = {
        login:{
            pathname:'/login',
            state:{ifrepathname:true}
        },
    };

    componentDidMount() {
        const that = this;
        if(cookie.load('mid')){
            $.ajax({
                url:'/login',
                type:'POST',
                dataType:'json',
                data:{
                    act:'getuserinfo',
                    mid:cookie.load('mid')
                },
                success(e){
                    if(e.status == 1){
                        that.updata_login()
                        setInterval((e)=>{
                            that.updata_login()
                        },60000)
                    }
                }
            })
        }
    }

    componentDidUpdate(){
        this.getuserinfo()
        // this.iflogin('登录过期！')
    }

    iflogin(msg){
        if(!cookie.load('mid')){
            alert(msg)
            this.props.history.push({   
                pathname: '/login',
            });
        }
        // store.dispatch(go2login)
        // // console.log(store.getState().status!=0)
        // if(store.getState().status!=0){
        //     alert(msg)
        //     this.props.history.push({   
        //         pathname: '/login',
        //     });
        // }
    }

    getuserinfo(){
        const that = this;
        if(cookie.load('mid')){
            $.ajax({
                url:'/login',
                type:'POST',
                dataType:'json',
                data:{
                    act:'getuserinfo',
                    mid:cookie.load('mid')
                },
                success(e){
                    console.log(e)
                    if(e.status == 2){
                        alert(e.msg)
                        cookie.remove('mid')
                        that.props.history.push(that.path.login)
                    }
                }
            })
        }else{
            alert('请先登入');
            that.props.history.push(that.path.login)
        }
    }

    updata_login=()=>{  //告知服务器没关闭浏览器
        const that = this;
        if(cookie.load('mid')){
            $.ajax({
                url:'/login',
                type:'POST',
                data:{
                    act:'updata_login',
                    mid:cookie.load('mid')
                },
                dataType:'json',
                success(e){
                    // console.log(e)
                }
            })
        }
    }

    toggle = (e) => {
        if(!this.state.collapsed){
            this.MenuLeft.menuclose()
        }else{
            this.MenuLeft.menuopen()
        }
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };  

    render() {
        return (
            <Layout className='app-layout'>
                <Sider
                    className='app-sider'
                    breakpoint="md"
                    trigger={null}
                    collapsible={true}
                    collapsed={this.state.collapsed}
                    onCollapse={(collapsed, type) => {
                        this.toggle()
                    }}
                >
                    <MenuLeft menuRef={e=>this.MenuLeft = e} collapsed={this.state.collapsed} />
                </Sider>
                <Layout className={this.state.collapsed?'app-child-layout app-child-layout-unfold':'app-child-layout app-child-layout-fold'}>
                    <Header className='appheader' >
                        <Icon
                            className="trigger"
                            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                            onClick={this.toggle}
                        />
                        <HeaderRight userinfo={this.state.userinfo} setuserinfo={this.setuserinforef}/>
                    </Header>
                    <Content className='app-content'>
                        <AppRouter />
                    </Content>  
                    <Footer></Footer>
                </Layout>
            </Layout>
        );
    }
}

export default App;